<template>
  <div class="nav">
    <div class="item" :style="sty">
      <img :src="img" alt="" />
      <div class="txt" :style="size">{{ txt }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    txt: String,
    wh: {
      type: String,
      default: "50px",
    },
    color: {
      type: String,
      default: "#000",
    },
    img: {
      type: String,
    },
    sz: {
      type: String,
      default: "12px",
    },
    fcolor: {
      type: String,
      default: "#000",
    },
  },
  data() {
    return {
      sty: {
        width: this.wh,
        height: this.wh,
        color: this.color,
      },
      size: {
        fontSize: this.sz,
        color: this.fcolor,
      },
    };
  },
};
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  text-align: center;
  justify-content: space-between;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    img {
      width: 60%;
      height: 60%;
    }
    .txt {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
